<template>
  <div class="container">
    <!-- title部分 -->
    <van-nav-bar left-arrow @click-left="$router.back()" @click-right="save" title="编辑资料" right-text="保存"></van-nav-bar>
    <!-- 用户资料 -->
    <van-cell-group>
      <van-cell is-link title="头像" @click="openTx" center>
        <van-image slot="default" width="1.5rem" height="1.5rem" fit="cover" round :src="photo" />
      </van-cell>
      <van-cell is-link title="名称" @click="showName=true" :value="user.name" />
      <van-cell is-link title="性别" @click="showGender=true" :value="user.gender===0?'男':'女'" />
      <van-cell is-link title="生日" @click="openDate()" :value="user.birthday" />
    </van-cell-group>
    <!-- 资料修改 都是 弹出层 -->
    <!-- 修改头像弹出 -->
    <van-popup v-model="showPhoto" position="bottom">
      <input type="file" @change="preview" ref="fileInput" style="display:none">
      <van-cell value="本地相册选择" is-link @click="$refs.fileInput.click()" />
      <van-cell value="拍照" is-link />
    </van-popup>
    <!-- 修改登陆人名称 -->
    <van-popup v-model="showName" position="bottom">
      <van-field v-model="user.name" required placeholder="请输入用户名" />
    </van-popup>
    <!-- 修改性别 -->
    <van-popup v-model="showGender" position="bottom">
      <van-cell value="男" @click="changeGender(0)" is-link />
      <van-cell value="女" @click="changeGender(1)" is-link />
    </van-popup>
    <!-- 修改生日 -->
    <van-popup v-model="showBirthday" position="bottom">
      <van-datetime-picker title="选择生日" v-model="nowDate" type="date" :min-date="minDate" :max-date="maxDate" @cancel="showBirthday=false" @confirm="confirmDate" />
    </van-popup>
  </div>
</template>

<script>
// 导入dayjs
import dayjs from 'dayjs'
// 导入获取用户完整资料数据接口
import { getUserProfile, updateUserPhoto, updateUserInfo } from '@/api/user'

export default {
  name: 'user-profile',
  data () {
    return {
      // 弹窗控制
      showPhoto: false,
      showName: false,
      showGender: false,
      showBirthday: false,
      nowDate: new Date(),
      minDate: new Date('1950-01-01'),
      // 日期控件 最大可选日期
      maxDate: new Date(),
      // 默认用户信息
      // 头像信息 头像上传单独接口
      photo: 'https://img.yzcdn.cn/vant/cat.jpeg',
      //
      user: {
        name: '默认信息',
        gender: 0,
        birthday: '2019-10-10'
      }
    }
  },
  created () {
    this.getUser()
  },
  methods: {
    openTx () {
      this.showPhoto = true
      // 异步
      this.$nextTick(() => {
        console.log(this.$refs.fileInput)
      })
    },
    // 选择图片预览
    preview () {
      // 获取选择的图片=》在手机上可以触发选择手机相册或调用摄像头拍照
      // file对象
      const file = this.$refs.fileInput.files[0]
      // console.log(this.$refs.fileInput.files[0])
      /**
       * file对象转化用于浏览器渲染演示
       * 1、使用fileRender对象 -> new fileRender()
       * 2、调用实例方法转化为base64
       */
      const fr = new FileReader()
      // 异步执行 => 需要通过onload回调函数获取转换的结果
      fr.readAsDataURL(file)
      fr.onload = () => {
        // 显示转换的图片
        this.photo = fr.result
        // \关闭图片弹出层
        this.showPhoto = false
      }
    },
    // 获取待编辑的用户资料
    async getUser () {
      try {
        const { data } = await getUserProfile()
        // console.log(data)
        this.user = data
        this.photo = data.photo
      } catch (error) {

      }
    },
    async save () {
      try {
        /**
         * 1、修改头像 判读啊你是否修改头像
         */
        if (this.$refs.fileInput?.files[0]) {
          await updateUserPhoto(this.$refs.fileInput?.files[0])
        }
        await updateUserInfo(this.user)
        this.$toast.success('保存成功')
        // this.$router.replace('/user')
        this.$router.back()
      } catch (error) {
        console.log(error)
        this.$toast.fail('保存失败')
      }
    },
    // methods
    openDate () {
      // 有生日数据
      if (this.user.birthday) {
        // 修改当前选中时间为用户数据的时间
        this.nowDate = new Date(this.user.birthday)
      }
      this.showBirthday = true
    },
    confirmDate (value) {
      // 确认时间后  把Date转换成String
      // this.user.birthday后台要求的格式 需要通过 dayjs转化
      this.user.birthday = dayjs(value).format('YYYY-MM-DD')
      this.showBirthday = false
    },
    // 注意：调用接口
    changeGender (gender) {
      // 选择性别 gender 0 男  1 女
      this.user.gender = gender
      this.showGender = false
    }
  }
}
</script>

<style scoped lang='less'></style>
